<template>
  <div class="main">
    <div class="top">
      <img
        v-if="commentMain.user.head_img"
        :src="$axios.defaults.baseURL + commentMain.user.head_img"
        alt=""
      />
      <img v-else src="../../assets/w1.gif" alt="" />
      <div class="info">
        <div class="name">{{ commentMain.user.nickname }}</div>
        <div class="date">2小时前</div>
      </div>
      <div class="btnReply" @click="handleClick">回复</div>
    </div>
    <!-- 显示父评论 -->
    <Parent v-if="commentMain.parent" :parentData="commentMain.parent" />
    <!-- 显示主评论 -->
    <div class="commentMain">{{ commentMain.content }}</div>
  </div>
</template>

<script>
import Parent from "./Parent";
// 导入事件总线
import eventVue from "../../event";
export default {
  props: ["commentMain"],
  components: {
    Parent,
  },
  methods: {
    // 监听点击事件处理函数
    handleClick() {
      // 使用事件总线传输数据 将当前的主评论的id传输到输入框兄弟组件
      // 主动触发事件
      eventVue.$emit("commentReply", this.commentMain.id);

      // // 主动触发事件激活输入框
      // this.$emit("showTextarea");
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 10/360 * 100vw;
  margin-top: 10/360 * 100vw;
  border-bottom: 1px solid #888;
  .top {
    display: flex;
    margin-bottom: 10/360 * 100vw;
    img {
      width: 36/360 * 100vw;
      height: 36/360 * 100vw;
      border-radius: 50%;
      object-fit: cover;
    }
    .info {
      flex: 1;
      padding-left: 10/360 * 100vw;
      .name {
        font-size: 14/360 * 100vw;
        color: #333;
      }
      .date {
        font-size: 12/360 * 100vw;
        color: #888;
        padding-top: 2/360 * 100vw;
      }
    }
    .btnReply {
      font-size: 12/360 * 100vw;
      color: #888;
    }
  }
  .commentMain {
    margin: 20/360 * 100vw 0;
  }
}
</style>
